---
title: 将你的 Astro 网站部署到 Microsoft Azure
description: 如何将你的 Astro 网站通过 Microsoft Azure 部署上线
type: deploy
i18nReady: true
---

[Azure](https://azure.microsoft.com/) 是微软旗下的云平台。你可以使用 Microsoft Azure 的 [Static Web Apps](https://aka.ms/staticwebapps) 服务来部署你的 Astro 网站。

本指南将指导你使用 Visual Studio Code 部署存储在 GitHub 上的 Astro 网站。其他设置请参阅 Microsoft 的指南，了解如何使用 [Azure Pipelines 任务](https://learn.microsoft.com/zh-CN/azure/devops/pipelines/tasks/reference/azure-static-web-app-v0?view=azure-pipelines)。

## 前期准备

为了能完成本指南，你将需要：

- 需要一个 Azure 账号和订阅密钥。你可以在此处创建一个[免费 Azure 账号](https://azure.microsoft.com/free)。
-  你的应用代码需要推送到 [GitHub](https://github.com/)。
-  需要在 [Visual Studio Code](https://code.visualstudio.com/) 中安装 [SWA 扩展](https://marketplace.visualstudio.com/items?itemName=ms-azuretools.vscode-azurestaticwebapps)。

## 如何部署

1. 在 VS Code 中打开你的项目。

2. 打开 Static Web Apps 扩展，在 Azure 上登录，并点击 **+** 按钮创建一个新的 Static Web App。你将被提示选择要使用的订阅密钥。

3. 按照扩展启动的向导指引，为你的应用程序指定一个名称，并选择一个框架预设，然后指定应用程序的根目录（通常为 `/`）和构建文件的位置（通常为 `/dist`）。在内置的 Astro 模板中并没有列出 Azure 选项，所以你需要选择 `custom` 选项。接着启动向导将运行并在你的仓库的 `.github` 文件夹中创建一个 [GitHub Action](https://github.com/features/actions)（如果该文件夹不存在，则会自动创建）。

GitHub Action 将部署你的应用程序（你可以在 GitHub 仓库的 Actions 选项卡中查看部署的进度）。当部署成功完成后，你可以通过点击 SWA 扩展进度窗口中显示的地址旁的 **Browse Website** 按钮（此按钮将在执行 GitHub Action 后显示）来查看你的应用程序。

## 故障排除

假设为你创建的 GitHub Action YAML 使用的是 Node 14，这意味着 Astro 会构建失败。要解决这个问题，请在你的项目的 package.json 文件中添加以下代码片段。

```
  "engines": {
    "node": ">=18.0.0"
  },
```

## 官方资源

-  [Microsoft Azure Static Web Apps 文档](https://learn.microsoft.com/zh-CN/azure/static-web-apps/)

## 社区资源

-  [将 Astro 网站部署到 Azure Static Web Apps](https://www.blueboxes.co.uk/deploying-an-astro-website-to-azure-static-web-apps)
